<template>
  <div>
    <table cellspacing="0" v-if="courses.length > 0">
      <tr class="head">
        <th>节次</th>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
        <th>周六</th>
        <th>周日</th>
      </tr>
      <tr v-for="(row, i) in courses" v-bind:key="row">
        <th>{{i + 1}}</th>
        <td v-for="cell in row" v-bind:key="cell" :style="cell.title ? 'background-color: ' + cell.color + ';color:#555;border-radius: 10px' : ''" :rowspan="cell.span">
          {{cell.title && cell.title}}
        </td>
      </tr>
    </table>
    <div v-if="loading" style="text-align: center;padding: 100px 0">
      <nut-icon name="loading" />
      <div>加载中...</div>
    </div>
  </div>
</template>

<script>
import global from "@/components/global";

let colors = ['#66ccff', '#ccff66', '#ff66cc', '#66ffcc', '#cc66ff', '#ffcc66']
export default {
  name: "course",
  data() {
    return {
      courses: [],
      loading: false
    }
  },
  methods: {
    loadData() {
      let that = this
      this.loading = true
      global.http(this, 'api/user/course/', {
        success(r) {
          let cs = r.data.course.filter(c => c.week.filter(w => w === r.data.week.current).length > 0)
          cs = cs.map((c, i)=> {
            c.color = colors[i % colors.length];
            return c;
          })
          let rows = []
          for (let i = 1; i <= 15; i++) {
            let row = []
            for(let j = 1; j <= 7; j++){
              let course = cs.filter(c=>Math.min(...c.section) === i && c.day === j)
              if(course.length > 0){
                course[0].span = course[0].section.length
                course[0].show = true
                row.push(course[0])
              }else {
                if(i > 1){
                  let last = rows[i - 2][j - 1]
                  if(last.span > 1 && (last.title || !last.show)){
                    row.push({span: last.span - 1, show: false})
                  }else {
                    row.push({span: 1, show: true})
                  }
                }else {
                  row.push({span: 1, show: true})
                }
              }
            }
            rows.push(row)
          }
          rows = rows.map(row=>row.filter(r=>r.show))
          that.courses = rows
        },
        complete(){
          that.loading = false
        }
      })
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style scoped>


tr {
  height: 60px;
}

tr.head{
  height: 60px;
}

th, td {
  width: 12.5%;
  text-align: center;
  margin: 0;
}

th{
  background-color: white;
  border: 1px solid #eee;
  color: #555555;
}
</style>